﻿
* { margin: 0; padding: 0; border: 0; }
a:hover { text-decoration: none; }
/*主体架构
*/
html, body { height: 100%; padding: 0; margin: 0; border: 0; }
.p-wrapper { margin: 0 auto; height: 100%; width: 100%;  transition: max-width .7s ease; -moz-transition: max-width .7s ease; -webkit-transition: max-width .7s ease; }
.p-header { height: 50px; display: flex;  }
.p-header-left { flex: 0; height: 100%; }
.p-header-rigt { flex: 1; height: 100%; }
.logo-info { padding: 0px; text-align: center; width: 180px; height: 100%; }
.logo { padding: 10px; color: #3380fc; height: 100%; font-size: 20px; }
    .logo > img { width: 100%; height: 100% }

.p-content-body { position: fixed; top: 50px; width: 100%; height: 100%; }
.content-wrapper { height: 100%; position: relative; display: flex;}
.content-left { flex: 0; height: 100%; background-color: #fff;  box-shadow: 0 1px 4px rgba(0,21,41,.08); }
.content-rigt { flex: 1;  height: 100%; background-color: #f4f4f6; }

.bg-gradient-2 { background: radial-gradient(circle at 1.98% 3%,#2b2d2c,transparent 100%),radial-gradient(circle at 98.02% 98%,#2d85a2,transparent 100%),radial-gradient(circle at 50% 50%,#29384e,#668cc2 100%); }
.bg-gradient-3 { background: radial-gradient(circle at 1.98% 74.02%,#E55D87,transparent 100%),radial-gradient(circle at 98.02% 35.97%,#5FC3E4,transparent 100%),radial-gradient(circle at 50% 50%,#0cc285,#0cc285 100%); }
.bg-gradient-7 { background: radial-gradient(circle at 1.98% 85.01%,#353535,transparent 100%),radial-gradient(circle at 98.02% 18.98%,#505050,transparent 100%),radial-gradient(circle at 50% 50%,#656464,#0cc285 100%); }

/*头部搜索*/
.home-search-input { box-shadow: inset 0 0px 0px rgba(0,0,0,.075) !important; -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,.075) !important; border: none !important; }
    .home-search-input:focus { border-color: #66afe9 !important; box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075), 0 0 1px rgba(255, 255, 255, 0.6) !important; }
/*.search-box-circle>.form-control{ border-radius:0px !important;}*/
/*隐藏div滚动条*/
.outer-container, .content { width: 100%; height: 150px; }
.outer-container { width: 100%; position: relative; overflow: hidden; }
.inner-container { width: 100%; position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; }
    /* for Chrome */
    .inner-container::-webkit-scrollbar { display: none; }
.home-search-info .list-group-item { padding: 5px 15px !important; border: none; }
/*头部右边*/
.content-rigt-by { height: 100%; position: relative; display: flex;  background-color: #fff; z-index: 11; color: #333; }
    .content-rigt-by > div:first-child { flex: 1;  }
    .content-rigt-by > div:last-child { flex: 0; }

/*头部左边内容*/
.p-header-ll { position: relative; display: flex; }
.ann-msg { color: #fff; text-align: center; margin: 3px 6px 3px 0px; height: 36px; border-radius: 3px; }


/*头部右边内容*/
.p-header-rr { height: 50px;  }
    .p-header-rr > div { display: flex;}

    .user-informs-list{width: 200px;}
.user-informs-list > div{flex: 1;}

.user-informs { margin-right: 10px; height: 50px; position: relative;}
.user-informs>div{display: inline-block;}
.user-logo { padding: 10px 5px; }
    .user-logo > img { display: block; width: 30px; height: 30px; border-radius: 50%; border: 0; float: left; }
.user-names {cursor: pointer;
    height: 30px;
    line-height: 50px;
    text-align: left;
    padding: 0 5px;
    color: #333;
    position: absolute;
    top: 2px;}
    .user-names:hover { color: #2d8cf0; }
.user-menu-list { box-shadow: 0 1px 6px rgba(0,0,0,.2); border: none !important; }
    .user-menu-list > li > a > i { display: inline-block; margin: 0; padding: 0; }
    .user-menu-list > li > a > span { padding-left: 6px; display: inline-block; margin: 0; padding: 0; }
.fast-btns { margin: 0 25px 0 15px; }
.fast-search { margin-top: 10px; }
.fast-btn { display: block; color: rgba(255,255,255,.8); color: #353535; border-radius: 3px; width: 0px; height: 100%; text-align: center; line-height: 100%; margin-top: 17px; }
    .fast-btn:hover { color: #0AE; text-decoration: none; cursor: pointer; background-color: rgba(255,255,255,.3); }
    .fast-btn > i { font-size: 15px; }


/*左边占位快捷按钮*/
.mission-left { height: 36px; /*background-color: #F6F6F6;*/ }


/*右边快捷菜单切换*/
.mission-board { padding: 0 6px 0 6px; height: 43px; background-color: #F3F6F8; clear: both; box-shadow: 0 6px 10px rgba(0,0,0,.09); }
    .mission-board > div:first-child { flex: 0; }
.mission-home {
    position: relative;
    text-decoration: none;
    display: block;
    width: 100px;
    height: 36px;
    line-height: 36px;
    color: #333;
    text-align: center;
    background-color: #fff;
    top: 6px;
    border-radius: 8px 8px 0 0;
}
    .mission-home:hover { background-color: rgba(0,0,0,.1); color: #333; cursor: pointer; text-decoration: none; }
    .mission-home.active { color: #333; }
.top-menu { padding: 6px 0; margin: 0; list-style: none;  width: 100%; overflow-x: auto; }
    .top-menu > li { position: relative;  float: left; }
        .top-menu > li > a { position: relative;
            text-decoration: none;
            display: block;
            width: 154px;
            color: #333;
            text-align: left;
      
            border-radius: 8px 8px 0 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 8px; }
            .top-menu > li > a.active { background-color: #fff; }
            .top-menu > li > a:hover { text-decoration: none; color: #333; cursor: pointer; background-color: rgba(0,0,0,.1); }
            .top-menu > li > a > span[data-top-menu="close"] { 
                position: absolute;
    right: 2px;
    padding: 1px 4px 0px 5px;
    border-radius: 0px;
  
    font-size: 12px;
    font-weight: normal;
  
    border-radius: 100%;
}
             
                .top-menu > li > a > span[data-top-menu="close"]:hover { cursor: pointer; background-color: rgba(0,0,0,.2); transition: all .3s ease-out; }

@keyframes am-menu {
    0% { width: 0% }
    100% { width: 100% }
}
/*
    左边菜单栏
*/
.scroll-sidebar { width: 180px;  }


.menu-ul{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    list-style: none;
    line-height: 1;
}
.menu-btn{
    position: relative;
    margin: 0;
    padding: 0;
    outline: none;
    list-style: none;
    padding: 15px 26px;
    cursor: pointer;
}

.menu-btn:hover{
    color: #3380fc;
}

.menu-ul>li ul{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    list-style: none;
    line-height: 1;
    display: none
}

.menu-ul>li ul>li .menu-btn{
    padding-left: 36px;
}

.menu-ul>li ul>li ul>li .menu-btn{
    padding-left: 46px;
    transition: all .3s ease-in;
}

.menu-ul>li ul>li ul>li .menu-btn.active{
    background-color: #f0f6ff;
    color: #3380fc;
}
.menu-ul>li ul>li ul>li .menu-btn.active::after{
    content:'';
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    right: 0;
    background-color: #3380fc;
    animation:key_menu_active .3s linear  alternate  ;
}

@keyframes key_menu_active{
    0% { height:0%; }
    100% { height: 100%; }
}

.menu-btn i{
    display: inline-block;
}

.menu-icon {
    margin-right: 6px;
}
.menu-icon-expand {
    right: 20px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.menu-btn .menu-icon-expand>i{
    transition: all .3s ease-in;
}
.menu-btn.active .menu-icon-expand>i{
    transform: rotate(90deg);
}

@keyframes menu-three-ames-active {
    0% { left: 0; }
    100% { left: 6px; }
}

@-webkit-keyframes menu-three-ames-active {
    0% { left: 0; }
    100% { left: 6px; }
}

@-moz-keyframes menu-three-ames-active {
    0% { left: 0; }
    100% { left: 6px; }
}

@-o-keyframes menu-three-ames-active {
    0% { left: 0; }
    100% { left: 6px; }
}

/*右边*/
.content-iframes { height: 100%; }
.content-iframe { height: 100%;
    margin: 16px;
    background-color: #fff;
    border-radius: 6px; }
    .content-iframe > iframe { width: 100%; height: 100%; border: 2px; }


/*右边加载内容*/
.iframe-fade { animation: fadeInUp .5s .2s ease both; -webkit-animation: fadeInUp .5s .2s ease both; -moz-animation: fadeInUp .5s .2s ease both; -o-animation: fadeInUp 1s .2s ease both; }
.tree-menu { background-color: #333744; color: #fff; width: 160px; margin: 0 auto; }
    .tree-menu li > a { color: #fff; }

@keyframes fadeInUp {
    0% { opacity: 0; -webkit-transform: translateY(20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); }
}

@-webkit-keyframes fadeInUp {
    0% { opacity: 0; -webkit-transform: translateY(20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); }
}

@-moz-keyframes fadeInUp {
    0% { opacity: 0; -moz-transform: translateY(20px); }
    100% { opacity: 1; -moz-transform: translateY(0); }
}

@-o-keyframes fadeInUp {
    0% { opacity: 0; -moz-transform: translateY(20px); }
    100% { opacity: 1; -moz-transform: translateY(0); }
}

/*右边内容退出*/
.iframe-out { animation: fadeOutDown .5s .2s ease both; -webkit-animation: fadeOutDown .5s .2s ease both; -moz-animation: fadeOutDown .5s .2s ease both; -o-animation: fadeOutDown .5s .2s ease both; }

@keyframes fadeOutDown {
    0% { opacity: 1; -webkit-transform: translateY(0); }
    100% { opacity: 0; -webkit-transform: translateY(20px); }
}

@-webkit-keyframes fadeOutDown {
    0% { opacity: 1; -webkit-transform: translateY(0); }
    100% { opacity: 0; -webkit-transform: translateY(20px); }
}

@-moz-keyframes fadeOutDown {
    0% { opacity: 1; -moz-transform: translateY(0); }
    100% { opacity: 0; -moz-transform: translateY(20px); }
}

@-o-keyframes fadeOutDown {
    0% { opacity: 1; -webkit-transform: translateY(0); }
    100% { opacity: 0; -webkit-transform: translateY(20px); }
}
